<template>
  <div class="container">
    <Breadcrumb>
      <BreadcrumbItem>理财产品管理</BreadcrumbItem>
    </Breadcrumb>
    <Divider />
    <!-- 模糊查询 -->
    <Form ref="formInfo" label-position="left" :label-width="70" :model="formInfo" inline>
      <FormItem label="账号" prop="productName">
        <i-input v-model="formInfo.productName" placeholder="请输入" style="width: 200px"></i-input>
      </FormItem>
      <Button type="primary" icon="ios-search" @click="selectProduct()">查询</Button>
    </Form>
    <!-- 添加、删除 -->
    <div class="butt">
      <Button type="primary" icon="md-add" @click="propertyAdd">添加</Button>
      <Button type="error" class="delete">批量删除</Button>
    </div>
    <Table border :columns="columns7" :data="data6" class="table"></Table>
    <!-- <Page :total="100" show-sizer class="fenye"></Page> -->

   
    <Page :total="pageTotal" 
    :current="pageNum" 
    :page-size="pageSize" 
    show-elevator 
    show-sizer 
    show-total 
    placement="top"  
    @on-change="handlePage" 
    @on-page-size-change='handlePageSize'
    class="fen5">
    </Page>

    <!--修改密码弹窗-->
    <Modal v-model="formTable.modal" title="用户修改" @on-cancel="modalCancel">
      <Form
        ref="formTable"
        label-position="right"
        :rules="formTableRules"
        :label-width="120"
        :model="formTable"
      >
        <Form-item label="理财产品名称" prop="productName">
          <i-input v-model="formTable.productName" placeholder="请输入理财产品名称"></i-input>
        </Form-item>
        <Form-item label="理财产品种类" prop="categoryName">
          <i-input v-model="formTable.categoryName" placeholder="请输入理财产品种类"></i-input>
        </Form-item>
        <Form-item label="理财产品利率" prop="productRate">
          <i-input v-model="formTable.productRate" placeholder="请输入理财产品价格"></i-input>
        </Form-item>
        <Form-item label="理财产品存取类型" prop="accessType">
          <i-input v-model="formTable.accessType" placeholder="请输入理财产品存取类型"></i-input>
        </Form-item>
        <Form-item label="理财产品期限" prop="accessPriod">
          <i-input v-model="formTable.accessPriod" placeholder="请输入理财产品期限"></i-input>
        </Form-item>
        <Form-item label="最低买入金额" prop="minimumPerchase">
          <i-input v-model="formTable.minimumPerchase" placeholder="请输入最低买入金额"></i-input>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button @click="modalCancel">取消</Button>
        <Button type="primary" icon="checkmark" :loading="formTable.loading" @click="editSubmit">修改</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    const validatePassCheck = (rule, value, callback) => {};
    return {
      pageTotal: 0, //数据总数
      pageNum: 1, //初始页
      pageSize: 10, //每页条数
      formInfo: {
        productName: ""
      },
      formTable: {
        modal: false,
        loading: false,
        productId: "",
        categoryId: "",
        categoryName: "",
        productName: "",
        productRate: "",
        accessType: "",
        accessPriod: "",
        minimumPerchase: ""
      },
      columns7: [
        {
          type: "selection",
          width: 70,
          align: "center"
        },
        {
          title: "编号",
          width: 70,
          key: "productId",
          align: "center"
        },
        {
          title: "理财产品名称",
          key: "productName",
          align: "center"
        },
        {
          title: "理财产品种类",
          key: "categoryName",
          align: "center"
        },
        {
          title: "理财产品利率",
          key: "productRate",
          align: "center"
        },
        {
          title: "理财产品存取类型",
          key: "accessType",
          align: "center"
        },
        {
          title: "理财产品期限",
          key: "accessPriod",
          align: "center"
        },
        {
          title: "最低买入金额",
          key: "minimumPerchase",
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          width: 140,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "10px"
                  },
                  on: {
                    click: () => {
                      this.userEdit(params.row);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index, params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data6: [
        {
          categoryId: "",
          categoryName: "",
          productId: "",
          productName: "",
          productRate: "",
          accessType: "",
          accessPriod: "",
          minimumPerchase: ""
        }
      ]
    };
  },
  methods: {
    
    //分页
    handlePage(value) {
      console.log(value);
      this.pageNum = value;
      this.getProper();
    },

    handlePageSize(value) {
      console.log(value);
      this.pageSize = value;
      this.getProper();
    },

    getProper(){
        this.$axios.get("product",{
          params:{
            pageNum:this.pageNum,
            pageSize:this.pageSize
          }
        }).then(response => {
          console.log(response.data)
          this.pageTotal = response.data.tatol
          var result = response.data.data;
          this.data6 = [];
          for(let i = 0;i<result.length;i++){
            this.data6.push({
              categoryId: result[i].tbCategory.categoryId,
              categoryName: result[i].tbCategory.categoryName,
              productId: result[i].productId,
              productName: result[i].productName,
              productRate: result[i].productRate,
              accessType: result[i].accessType,
              accessPriod: result[i].accessPriod,
              minimumPerchase: result[i].minimumPerchase
            })

          }

        }).catch(response => {

        })

    },
    //查询
    selectProduct() {
       this.$axios.get('products', {
        params: {
          name: this.formInfo.productName
        }
        }).then(response => {
          console.log(response.data)
          var result = response.data.data;
          this.data6 = [];
          for(let i = 0;i<result.length;i++){
            this.data6.push({
              categoryId: result[i].tbCategory.categoryId,
              categoryName: result[i].tbCategory.categoryName,
              productId: result[i].productId,
              productName: result[i].productName,
              productRate: result[i].productRate,
              accessType: result[i].accessType,
              accessPriod: result[i].accessPriod,
              minimumPerchase: result[i].minimumPerchase
            })

          }
        }).catch()
    
      this.$refs[productName].validate(valid => {
      })
    },
    //添加
    propertyAdd() {
      this.$router.push("prpertygoodsAdd");
    },
    //删除
    remove(index, row) {
      this.$Modal.confirm({
        title: "温馨提示",
        width: 300,
        content: "<p>你确定要删除?删除后不可恢复!</p>",
        loading: false,
        onOk: () => {
          this.data6.splice(index, row.productId);
          this.$axios.delete("product", {
            params: { productId: row.productId }
          });
        }
      });
    },
    // 修改
    editSubmit: function(data) {
      this.formTable.loading = true;
      this.$axios
        .put("product", {
          categoryId: this.formTable.categoryId,
          categoryName: this.formTable.categoryName,
          productId: this.formTable.productId,
          productName: this.formTable.productName,
          productRate: this.formTable.productRate,
          accessType: this.formTable.accessType,
          accessPriod: this.formTable.accessPriod,
          minimumPerchase: this.formTable.minimumPerchase
        })
        .then(response => {
          this.formTable.loading = false;

          if (response.data.code == 0) {
            this.$Notice.success({
              title: "信息修改成功"
            });
          } else {
            this.$Notice.error({
              title: "信息修改失败"
            });
          }
          this.modalCancel();
        })
        .catch(console.log(response.data));
    },
    //获取每一行值
    userEdit(row) {
      console.log(row);
      this.formTable.modal = true;
      this.formTable.categoryId = row.categoryId;
      this.formTable.categoryName = row.categoryName;
      this.formTable.productId = row.productId;
      this.formTable.productName = row.productName;
      this.formTable.productRate = row.productRate;
      this.formTable.accessType = row.accessType;
      this.formTable.accessPriod = row.accessPriod;
      this.formTable.minimumPerchase = row.minimumPerchase;
    },
    //取消修改
    modalCancel() {
      this.formTable.modal = false;
      this.$refs["formTable"].resetFields();
    }
  },
  //查询所有
  created: function() {
    this.getProper()
    // this.$axios
    //   .get("products")
    //   .then(response => {
    //     console.log(response.data);
    //     var result = response.data.data;
    //     this.data6 = [];
    //     for (let i = 0; i < result.length; i++) {
    //       this.data6.push({
    //         categoryId: result[i].tbCategory.categoryId,
    //         categoryName: result[i].tbCategory.categoryName,
    //         productId: result[i].productId,
    //         productName: result[i].productName,
    //         productRate: result[i].productRate,
    //         accessType: result[i].accessType,
    //         accessPriod: result[i].accessPriod,
    //         minimumPerchase: result[i].minimumPerchase
    //       });
    //     }
    //     console.log(this.data6);
    //   })
    //   .catch();
  }
};
</script>

<style >
.fen5 {
  position: relative;
  margin-top: 30px;
  left: 32%;
}
.table {
  position: relative;
  margin-top: 20px;
}
.delete {
  position: relative;
  left: 30px;
}

.butt {
  position: relative;
  top: 1px;
  left: 1px;
}
</style>